import React from 'react';
import {
    Row,
    Col,
    Table,
    Icon,
    notification,
    Select,
    Input,
} from 'antd';
import axios from 'axios';
import OrderList from './../../CustomService/OrderInfo/OrderList';
import intercept from '../../../utils/intercept';
import { config } from 'utils';
const Option = Select.Option;

export default class BusStationRefund extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: [],
            loading: false,
            pagination: {
                current: 1,
                pageSize: 10
            },
            onChange: this.onChange,
            keyword: '',
            status: 4,
            total: 0,
            rejectcontent: ''
        };
    };
    componentDidMount() {
        this.getOrderInfo();
    };
    search(e) {
        const { value } = e.target;
        this.setState({ keyword: value });
        this.getOrderInfo({ keyword: value });
    }
    SelectChange = (value) => {
        //console.log(value);
        this.setState({ status: value });
    }
    onChange = (pagination, filters, sorter) => {
        this.getOrderInfo({
            sortField: sorter.field,
            sortOrder: sorter.order,
            page: pagination.current,
            keyword: this.state.keyword,
            ...filters
        });
    };
    getOrderInfo = (params = {}) => {
        const token = sessionStorage.getItem("token");
        this.setState({ loading: true });
        const keyword = typeof (params.keyword) === "undefined"
            ? ''
            : params.keyword;
        const status = this.state.status;

        axios
            .get(`${config.api}Station/GetStationOrderRefund?page=${params.page}&pageSize=${this.state.pagination.pageSize}&keyword=${keyword}&status=${status}`, { headers: { Authorization: 'Bearer ' + token } })
            .then((data) => {
                const pagination = {
                    ...this.state.pagination
                };
                // console.log(data);
                pagination.total = data.data.pageList.totalRows;
                pagination.current = params.page;
                this.setState({ loading: false, dataSource: data.data.pageList.collections, pagination, total: `共${pagination.total}个` });
            }).catch(err => {
                intercept;
            });
    };
    handleMenuClick = (e) => {
        //console.log(e);
        this.setState({
            status: e.key
        })
    };
    openNotification = (title, desc, color) => {
        notification.open({
            message: title,
            description: desc,
            icon: <Icon type="smile-circle" style={{ color: color }} />,
        });
    };
    rejectOnchange = (ev) => {
        //console.log(ev.target.value);
        this.setState({
            rejectcontent: ev.target.value
        })
    }

    render() {
        const statusstr = ['处理中', '已退款', '已撤销', '第三方已处理', '全部'];
        const columns = [
            {
                title: '购票渠道',
                dataIndex: 'traderAccount',
                width: 120
            },
            {
                title: '订单号',
                dataIndex: 'orderCode',
                width: 150
            }, {
                title: '申请人',
                dataIndex: 'operater',
                width: 80
            }, {
                title: '张数',
                dataIndex: 'amount',
                width: 50
            }, {
                title: '票价(元)',
                dataIndex: 'price',
                width: 80
            }, {
                title: '退款金额',
                dataIndex: 'totalMoney',
                width: 80
            }, {
                title: '购票时间',
                dataIndex: 'doTime',
                width: 150
            }, {
                title: '退款原因',
                dataIndex: 'refundContent',
                width: 250
            }, {
                title: '支付类型',
                dataIndex: 'payType',
                width: 80
            }, {
                title: '支付账号',
                dataIndex: 'payAccount',
                width: 80
            }, {
                title: '退款账号',
                dataIndex: 'refundAccount',
                width: 80
            },
            {
                title: '区间',
                dataIndex: 'startAndEnd',
                width: 150
            },
            {
                title: '状态',
                dataIndex: 'status',
                className: 'childtable',
                width: 80,
                render: (text, record) => {
                    return (
                        <span style={{ color: record.status === 0 ? 'red' : 'green' }}>{statusstr[record.status]}</span>
                    )
                }
            }
        ];
        const className = "components-table-demo-nested";
        const expandedRowRender = record => <OrderList ordercode={record.orderCode} />; //<p>{record.orderCode}</p>;
        const scroll = {
            y: 600
        };
        const selectBefore = (
            <Select defaultValue='全部' onChange={this.SelectChange} style={{ width: 80 }}>
                <Option value="4">全部</Option>
                <Option value="0">处理中</Option>
                <Option value="1">已退款</Option>
                <Option value="2">已撤销</Option>
            </Select>
        );

        return (
            <div className="orderinfo">
                <Row gutter={8} style={{
                    marginTop: '20px'
                }}>
                    <Col span={24}>
                        <div
                            style={{
                                textAlign: 'center',
                                margin: 10
                            }}>
                            <Input
                                placeholder="请输入任意查询条件"
                                addonBefore={selectBefore}
                                addonAfter={(<span style={{ color: 'red' }}>{this.state.total}</span>)}
                                style={{
                                    width: 600
                                }}
                                onPressEnter={(value) => { this.search(value) }} />

                        </div>
                        <Table
                            {...this.state}
                            expandedRowRender={expandedRowRender}
                            bordered={true}
                            className={className}
                            columns={columns}
                            scroll={scroll} />
                    </Col>
                </Row>
            </div>
        )
    }
}
